<template>
  <div class="page-score-order-info detail-dialog">
    <div class="new-page-title">
      <div class="line" />
      <div class="text">
        {{
          !dataForm.orderNumber
            ? $t('crud.addTitle')
            : $t('order.orderDetails')
        }}
      </div>
    </div>
    <!-- native modifier has been removed, please confirm whether the function has been affected  -->
    <!-- native modifier has been removed, please confirm whether the function has been affected  -->
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="80px"

      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <div class="mod-order-orderInfo">
        <div class="content">
          <div
            class="order-number"
            style="display: none"
          >
            <div class="num-cont">
              <el-form-item :label="$t('order.number') + ':'">
                <span class="text">{{ dataForm.orderNumber }}</span>
              </el-form-item>
              <el-form-item>
                <el-steps
                  :active="stepsStatus"
                  align-center
                  :process-status="dataForm.status == 6 ? 'error' : 'wait'"
                >
                  <el-step
                    :title="$t('order.submitOrder')"
                    :description="dataForm.createTime"
                  />
                  <el-step
                    :title="$t('order.paid')"
                    :description="dataForm.payTime"
                  />
                  <el-step
                    :title="$t('order.delivered')"
                    :description="dataForm.dvyTime"
                  />
                  <el-step
                    :title="$t('order.receivedGoods')"
                    :description="dataForm.finallyTime"
                  />
                </el-steps>
              </el-form-item>
            </div>
          </div>
          <div
            class="order-state"
            style="display:none"
          >
            <div class="state-cont">
              <div class="state-title">
                <el-form-item
                  :label="$t('order.orderStatus') + ':'"
                >
                  <template #default>
                    <div
                      v-if="dataForm.status === 1"
                    >
                      {{ $t("order.pendingPayment") }}
                    </div>
                    <div
                      v-if="dataForm.status === 2"
                    >
                      {{ $t("order.toBeShipped") }}
                    </div>
                    <div
                      v-if="dataForm.status === 3"
                    >
                      {{ $t("order.pendingReceipt") }}
                    </div>
                    <div
                      v-if="dataForm.status === 4"
                    >
                      {{ $t("order.toBeEvaluated") }}
                    </div>
                    <div
                      v-if="dataForm.status === 5"
                    >
                      {{ $t("order.success") }}
                    </div>
                    <div
                      v-if="dataForm.status === 6"
                    >
                      {{ $t("order.fail") }}
                    </div>
                    <div
                      v-if="dataForm.status === 7"
                    >
                      {{ $t("group.waitGroup") }}
                    </div>
                  </template>
                </el-form-item>
                <el-form-item>
                  <el-row>
                    <!-- <el-button
                    type="primary"
                    v-if="dataForm.status === 2"
                    plain
                    @click="changeOrder()"
                    >发货</el-button>-->
                    <!-- <el-button type="info" plain>打印</el-button> -->
                  </el-row>
                </el-form-item>
              </div>
              <div class="order-info">
                <div class="order-details">
                  <div class="detail-title">
                    <img
                      src="~@/assets/img/car.png"
                      alt
                    >
                    <span class="prompt">{{ $t("order.deliveryMsg") }}</span>
                    &nbsp;
                    <div
                      v-if="dataForm.status < 3 || dataForm.status === 7"
                      class="default-btn text-btn"
                    >
                      {{ $t("order.reviseAddr") }}
                    </div>
                  </div>
                  <div class="detail-cont">
                    <div class="detail01">
                      <img
                        src="~@/assets/img/address.png"
                        alt
                      >
                      <div class="text-width">
                        <!-- <span class="revise-addr" @click="changeAddr(dataForm.addrOrderId)">
                        <img src="~@/assets/img/revise.png" alt=""/>修改地址
                        </span>-->
                        <el-form-item
                          :label="$t('publics.addressee') + ':'"
                        >
                          <span>{{ dataForm.userAddrOrder.receiver }}</span>
                        </el-form-item>
                        <el-form-item
                          :label="$t('publics.mobilePhone') + ':'"
                        >
                          <span>{{ dataForm.userAddrOrder.mobile }}</span>
                        </el-form-item>
                        <el-form-item
                          :label="$t('publics.deliveryAddr') + ':'"
                        >
                          <span>{{ dataForm.userAddrOrder.province
                          }}{{ dataForm.userAddrOrder.city
                          }}{{ dataForm.userAddrOrder.area
                          }}{{ dataForm.userAddrOrder.addr }}</span>
                        </el-form-item>
                      </div>
                    </div>
                    <div class="detail01">
                      <img
                        src="~@/assets/img/invoice.png"
                        alt
                      >
                      <span>{{ $t("order.invoiceMsg") }}</span>
                    </div>
                  </div>
                </div>
                <div class="buyers">
                  <div class="detail-title">
                    <img
                      src="~@/assets/img/buyer.png"
                      alt
                      style="margin-right: 15px"
                    >
                    <el-form-item
                      :label="$t('order.orderRemarks')"
                      style="margin-top: 22px"
                      label-width="80px"
                    >
                      &nbsp;
                      <div
                        class="default-btn text-btn"
                      >
                        {{
                          $t("order.reviseRemarks")
                        }}
                      </div>
                    </el-form-item>
                  </div>
                  <div class="buyers-info">
                    <div class="detail02">
                      <img
                        src="~@/assets/img/message.png"
                        alt
                      >
                      <div class="text-width">
                        <span>{{ $t("order.reviseRemarks") + ":" }}</span>
                        <br>
                        <span>{{ dataForm.remarks }}</span>
                      </div>
                    </div>
                    <div class="detail02">
                      <img
                        src="~@/assets/img/message.png"
                        alt
                      >
                      <div class="text-width">
                        <span>{{ $t("order.sellerNote") + ":" }}</span>
                        <br>
                        <span>{{ dataForm.shopRemarks }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item-list">
                <el-table
                  :data="dataForm.orderItems"
                  border
                  header-cell-class-name="table-header"
                  row-class-name="table-row"
                >
                  <el-table-column
                    prop
                    :label="$t('home.goods')"
                  >
                    <template #default="scope">
                      <ImgShow
                        :src="scope.row.pic"
                        :img-style="{width:'100px',height:'100px'}"
                      />
                      <span>{{ scope.row.prodName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="price"
                    :label="$t('home.unitPrice')"
                    width="180"
                    align="center"
                  >
                    <template #default="scope">
                      <span>{{ scope.row.price }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="count"
                    :label="$t('home.quantity')"
                    width="180"
                    align="center"
                  >
                    <template #default="scope">
                      <span>{{ scope.row.prodCount }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="totalPrice"
                    :label="$t('home.totalPrice')"
                    width="180"
                    align="center"
                  >
                    <template #default="scope">
                      <span>{{ scope.row.productTotalAmount }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="item-info">
                <el-form-item
                  :label="$t('home.prodTotalPrice') + ':'"
                >
                  <span class="text">￥{{ dataForm.total }}</span>
                </el-form-item>
                <!-- <el-form-item label="商城优惠:">
              <span class="text">￥15.00</span>
                </el-form-item>-->
                <!-- <el-form-item label="积分抵扣:">
              <span class="text">￥15.00</span>
                </el-form-item>-->
                <!-- <el-form-item label="发票费用:">
              <span class="text">￥15.00</span>
                </el-form-item>-->
                <el-form-item
                  v-if="dataForm.freightAmount"
                  :label="$t('home.shippingFees') + ':'"
                >
                  <span class="text">￥{{ dataForm.freightAmount }}</span>
                </el-form-item>
                <el-form-item :label="$t('home.amountDue') + ':'">
                  <span class="text">{{
                    $t("order.monetaryUnit") +
                      dataForm.actualTotal +
                      " + " +
                      dataForm.score +
                      $t("order.score") }}</span>
                </el-form-item>
              </div>
            </div>
          </div>

          <div class="order-number">
            <div class="number">
              <span class="text">{{ $t("order.number") }}：</span>
              {{ dataForm.orderNumber }}
            </div>
            <div class="time">
              <span class="text">{{ $t("order.createTime") }}：</span>
              {{ dataForm.createTime }}
            </div>
            <div class="type">
              {{
                [
                  $t("order.notYetrmalOrder"),
                  $t("order.groupPurchaseOrder"),
                  $t("order.spikeOrder"),
                ][dataForm.orderType]
              }}
            </div>
          </div>
          <div class="order-state">
            <div class="state-box">
              <div class="state">
                {{
                  [
                    $t("order.waitToPay"),
                    $t("order.waitDel"),
                    $t("order.waitingFeGoods"),
                    $t("order.waitingtion"),
                    $t("order.commoditful"),
                    $t("order.commodityFailed"),
                    $t("order.commodited"),
                  ][dataForm.status - 1]
                }}
              </div>
              <div class="state-des">
                <div v-if="dataForm.status === 1">
                  {{ $t("order.buyerDidNTime") }}
                </div>
                <div v-if="dataForm.status === 2">
                  {{ $t("order.buyPleF") }}
                </div>
                <div v-if="dataForm.status === 3">
                  {{ $t("order.shelF") }}
                </div>
                <!-- <div v-if="dataForm.status === 4">订单已完成，等待买家发表评价。</div> -->
                <div v-if="dataForm.status === 5">
                  {{ $t("order.buyB") }}
                </div>
                <div v-if="dataForm.status === 6">
                  {{ $t("order.orderCanc") }}
                </div>
                <div v-if="dataForm.status === 7">
                  {{ $t("order.outTimeCanOrd") }}
                </div>
              </div>
            </div>
            <div class="state-steps">
              <el-form-item>
                <el-steps
                  style="flex:1"
                  :active="stepsStatus"
                  align-center
                  :process-status="dataForm.status == 6 ? 'error' : 'wait'"
                >
                  <el-step
                    :title="$t('order.submitOrder')"
                    :description="dataForm.createTime"
                  />
                  <el-step
                    :title="$t('order.paid')"
                    :description="dataForm.payTime"
                  />
                  <el-step
                    :title="$t('order.delivered')"
                    :description="dataForm.dvyTime"
                  />
                  <el-step
                    :title="$t('order.receivedGoods')"
                    :description="dataForm.finallyTime"
                  />
                </el-steps>
              </el-form-item>
            </div>
          </div>
          <div class="packages">
            <div class="p-tab">
              <div
                v-for="(deliveryExpresseItem, index) in dataForm.deliveryExpresses"
                :key="index"
                :class="indexs === index ? 'item active' : 'item'"
                @click="onClickListDelivery(deliveryExpresseItem, index)"
              >
                {{ $t("order.package") }}{{ index + 1 }}
              </div>
            </div>
            <div
              v-if="deliveryExpresse"
              class="p-con"
            >
              <div class="deliver-msg">
                <div class="d-item">
                  <div
                    class="text"
                    :style="$t('language') === 'language' ? 'width:210px;' : 'width:80px;'"
                  >
                    {{ $t("order.deliveryMethod") }}：
                  </div>
                  <div class="res">
                    {{
                      [
                        $t("order.expressDelivery"),
                        $t("order.expressDelivery"),
                        $t("order.selfMention"),
                        $t("order.noNeedRequired"),
                      ][deliveryExpresse.deliveryType] || [
                        $t("order.expressDelivery"),
                        $t("order.expressDelivery"),
                        $t("order.selfMention"),
                        $t("order.noNeedRequired"),
                      ][dataForm.dvyType]
                    }}
                  </div>
                  <!-- <div class="item">
                    <div class="text">配送方式：</div>
                    <div class="res" v-if="dataForm.dvyType == 1">快递</div>
                    <div class="res" v-if="dataForm.dvyType == 2">自提</div>
                    <div class="res" v-if="dataForm.dvyType == 3">无需快递</div>
                  </div>-->
                </div>
                <div class="d-item">
                  <div
                    class="text"
                    :style="$t('language') === 'language' ? 'width:210px;' : 'width:80px;'"
                  >
                    {{ $t("order.deliveryTime") }}：
                  </div>
                  <div class="res">
                    {{ deliveryExpresse.createTime }}
                  </div>
                </div>
                <div
                  v-if="deliveryExpresse.deliveryType !== 3"
                  class="d-item"
                >
                  <div
                    class="text"
                    :style="$t('language') === 'language' ? 'width:210px;' : 'width:80px;'"
                  >
                    {{ $t("order.courierCompany") }}：
                  </div>
                  <div class="res">
                    {{ deliveryExpresse.deliveryDto.companyName }}
                  </div>
                </div>
                <div
                  v-if="deliveryExpresse.deliveryType !== 3"
                  class="d-item"
                >
                  <div
                    class="text"
                    :style="$t('language') === 'language' ? 'width:210px;' : 'width:80px;'"
                  >
                    {{ $t("order.trackingNumber") }}：
                  </div>
                  <div class="res">
                    {{ deliveryExpresse.deliveryDto.dvyFlowId }}
                  </div>
                </div>
                <div class="d-goods over">
                  <div class="arrow-box">
                    <div class="arrow prev disable" />
                    <div class="arrow next" />
                  </div>
                  <div class="goods-box">
                    <div
                      v-for="(
                        orderItem, index
                      ) in deliveryExpresse.orderItems"
                      :key="index"
                      class="item"
                    >
                      <div class="img">
                        <prod-pic
                          :pic="orderItem.pic"
                          height="60px"
                          width="60px"
                        />
                      </div>
                      <div class="name">
                        {{ orderItem.prodName }}
                      </div>
                      <div class="number">
                        {{ $t("order.quantity") }}：{{ orderItem.prodCount }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="logistics">
                <div
                  v-if="deliveryExpresse && deliveryExpresse.deliveryDto"
                  class="l-tit"
                >
                  <span class="text">{{ $t("order.logisticsStatus") }}：</span>
                  <span
                    v-if="deliveryExpresse.deliveryDto.state === 0"
                    class="l-state"
                  >{{ $t("order.noRecord") }}</span>
                  <span
                    v-if="deliveryExpresse.deliveryDto.state === 1"
                    class="l-state"
                  >{{ $t("order.collected") }}</span>
                  <span
                    v-if="deliveryExpresse.deliveryDto.state === 2"
                    class="l-state"
                  >{{ $t("order.delivering") }}</span>
                  <span
                    v-if="deliveryExpresse.deliveryDto.state === 3"
                    class="l-state"
                  >{{ $t("order.haveBeenReceived") }}</span>
                  <span
                    v-if="deliveryExpresse.deliveryDto.state === 201"
                    class="l-state"
                  >{{ $t("order.reachTheDestinationCity") }}</span>
                  <span
                    v-if="deliveryExpresse.deliveryDto.state === 4"
                    class="l-state"
                  >{{ $t("order.problemPiece") }}</span>
                </div>
                <div
                  v-if="deliveryExpresse && deliveryExpresse.deliveryDto"
                  class="logistics-box"
                >
                  <div
                    v-if="
                      deliveryExpresse.deliveryDto.state === 0 &&
                        dataForm.status == 5 &&
                        dataForm.finallyTime !== null
                    "
                    class="item"
                  >
                    <div class="time">
                      {{ dataForm.finallyTime }}
                    </div>
                    <div class="text">
                      {{ $t("order.receivedGoods") }}
                    </div>
                  </div>
                  <div
                    v-for="(trace, index) in deliveryExpresse.deliveryDto
                      .traces"
                    :key="index"
                    class="item"
                  >
                    <div class="time">
                      {{ trace.acceptTime }}
                    </div>
                    <div class="text">
                      {{ trace.acceptStation }}
                    </div>
                  </div>
                  <div
                    v-if="
                      deliveryExpresse.deliveryDto.traces &&
                        deliveryExpresse.deliveryDto.traces.length < 1
                    "
                    class="item"
                  >
                    {{ $t("order.noLogisticsInformation") }}
                  </div>
                  <div
                    v-if="dataForm.status >= 3 && dataForm.dvyTime !== null"
                    class="item"
                  >
                    <div class="time">
                      {{ dataForm.dvyTime }}
                    </div>
                    <div class="text">
                      {{ $t("order.merchantHasShippedWa") }}
                    </div>
                  </div>
                  <div
                    v-if="dataForm.status >= 2 && dataForm.payTime !== null"
                    class="item"
                  >
                    <div class="time">
                      {{ dataForm.payTime }}
                    </div>
                    <div class="text">
                      {{ $t("order.buyerHasPaidWa") }}
                    </div>
                  </div>
                  <div
                    v-if="dataForm.status >= 1"
                    :class="['item', dataForm.status >= 1?'left-line':'']"
                  >
                    <div class="time">
                      {{ dataForm.createTime }}
                    </div>
                    <div class="text">
                      {{ $t("order.buyerSubmittedAnOrder") }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="order-info">
            <div class="info-item">
              <div class="item-tit">
                {{ $t("order.recipientInformation") }}
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.addressee") }}：
                </div>
                <div class="res">
                  {{ dataForm.userAddrOrder.receiver }}
                </div>
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.contactTel") }}：
                </div>
                <div class="res">
                  {{ dataForm.userAddrOrder.mobile }}
                </div>
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("publics.deliveryAddr") }}：
                </div>
                <div class="res">
                  {{ dataForm.userAddrOrder.province
                  }}{{ dataForm.userAddrOrder.area
                  }}{{ dataForm.userAddrOrder.city
                  }}{{ dataForm.userAddrOrder.addr }}
                </div>
                <!-- <div class="res">北京市 北京市 朝阳区 元大都城垣遗址公园6号 辣婆婆(东元大都店)</div> -->
              </div>
            </div>
            <div class="info-item">
              <div class="item-tit">
                {{ $t("order.shippingInformation") }}
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.delType") }}：
                </div>
                <div class="res">
                  {{
                    [
                      $t("order.expressDelivery"),
                      $t("order.expressDelivery"),
                      $t("order.selfMention"),
                      $t("order.noNeedRequired"),
                    ][dataForm.dvyType]
                  }}
                </div>
                <div
                  v-if="dataForm.dvyType === null"
                  class="res"
                >
                  {{ $t("order.notYet") }}
                </div>
                <!-- <div class="res" v-if="dataForm.dvyType == 1">快递</div>
                <div class="res" v-if="dataForm.dvyType == 2">自提</div>
                <div class="res" v-if="dataForm.dvyType == 3">无需快递</div>-->
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.deliveryTime") }}：
                </div>
                <div class="res">
                  {{ dataForm.dvyTime }}
                </div>
                <div
                  v-if="dataForm.dvyTime === null"
                  class="res"
                >
                  {{ $t("order.notYet") }}
                </div>
              </div>
            </div>
            <!-- <div class="info-item">
              <div class="item-tit">
                {{ $t("order.virtualInfo") }}
              </div>
              <div class="item">
                <div class="text">{{ $t("order.virtualMsg") }}：</div>
                <div class="res">
                <div
                    v-for="(virtualRemark,index) in virtualRemarkList"
                    :key="index" >
                  {{
                    virtualRemark.name
                  }}：{{
                    virtualRemark.value
                  }}
                </div>
                </div>
              </div>
            </div> -->
            <div class="info-item">
              <div class="item-tit">
                {{ $t("order.paymentInformation") }}
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.actualAmount") }}：
                </div>
                <div class="res">
                  {{ $t("order.monetaryUnit") + dataForm.actualTotal + $t("order.score") }}
                  <!-- {{ $t("order.monetaryUnit") +
                    dataForm.actualTotal +
                    " + " +
                    dataForm.score +
                    $t("order.score") }} -->
                </div>
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.payWay") }}：
                </div>
                <div v-if="dataForm.payType === null || dataForm.status === 1">
                  {{ $t("order.unpaid") }}
                </div>
                <div
                  v-else
                  class="res"
                >
                  {{
                    [
                      $t("order.pointsPayment"),
                      $t("platform.weChatPay"),
                      $t("platform.aliPay"),
                      $t("order.wechatScanCodePayment"),
                      $t("order.wechatH5Payment"),
                      $t("order.weclAccountPay"),
                      $t("order.alipayH5Payment"),
                      $t("order.alipayAPPPayment"),
                      $t("order.wechatAPPPayment"),
                      $t("order.balancePayment"),
                    ][dataForm.payType]
                  }}
                </div>
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.paymentTime") }}：
                </div>
                <div class="res">
                  {{ dataForm.payTime }}
                </div>
                <div
                  v-if="dataForm.payTime === null"
                  class="res"
                >
                  {{ $t("order.notYet") }}
                </div>
              </div>
            </div>
            <div class="info-item">
              <div class="item-tit">
                {{ $t("order.buyerInformation") }}
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.buyerSNickname") }}：
                </div>
                <div class="res">
                  {{ dataForm.nickName }}
                </div>
                <div
                  v-if="dataForm.nickName === null"
                  class="res"
                >
                  {{ $t("order.notYet") }}
                </div>
              </div>
              <div class="item">
                <div class="text">
                  买家电话：
                </div>
                <div class="res">
                  {{ dataForm.buyerMobile }}
                </div>
                <div
                  v-if="dataForm.buyerMobile === null"
                  class="res"
                >
                  {{ $t("order.notYet") }}
                </div>
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.buyerMessage") }}：
                </div>
                <div class="res">
                  {{ dataForm.remarks }}
                </div>
                <div
                  v-if="dataForm.remarks === null || dataForm.remarks === ''"
                  class="res"
                >
                  {{ $t("order.notYet") }}
                </div>
              </div>
            </div>
          </div>
          <div class="goods-list">
            <el-table
              :data="dataForm.orderItems"
              border
              header-cell-class-name="table-header"
              row-class-name="table-row"
            >
              <el-table-column
                prop
                :label="$t('home.goods')"
              >
                <template #default="scope">
                  <div class="df">
                    <ImgShow
                      :src="scope.row.pic"
                      :img-style="{width:'60px',height:'60px'}"
                    />
                    <span class="name">{{ scope.row.prodName }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="price"
                :label="$t('order.unitPrice')"
                width="180"
                align="center"
              >
                <template #default="scope">
                  <span>{{ scope.row.price }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="count"
                :label="$t('order.quantity')"
                width="180"
                align="center"
              >
                <template #default="scope">
                  <span>{{ scope.row.prodCount }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="totalPrice"
                :label="$t('order.totalPrice')"
                width="180"
                align="center"
              >
                <template #default="scope">
                  <span>{{ scope.row.productTotalAmount }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="goods-total">
              <div class="text-box">
                <div class="item">
                  <div class="text">
                    {{ $t("order.prodTotalPrice") }}:
                  </div>
                  <div class="number">
                    {{ $t("order.monetaryUnit") + dataForm.total + $t("order.score") }}
                    <!-- {{
                      $t("order.monetaryUnit") + dataForm.total +
                        " + " + dataForm.score +
                        $t("order.score") }} -->
                  </div>
                </div>
                <div
                  v-if="dataForm.reduceAmount"
                  class="item"
                >
                  <div class="text">
                    {{ $t("marketing.discountedPrice") }}:
                  </div>
                  <div class="number">
                    ￥{{ dataForm.reduceAmount }}
                  </div>
                </div>
                <div
                  v-if="dataForm.freightAmount"
                  class="item"
                >
                  <div class="text">
                    {{ $t("order.shippingFees") }}:
                  </div>
                  <div class="number">
                    ￥{{ dataForm.freightAmount }}
                  </div>
                </div>
                <div class="item act-price">
                  <div class="text">
                    {{ $t("order.amountDue") }}:
                  </div>
                  <div class="number">
                    {{ $t("order.monetaryUnit") + dataForm.actualTotal + $t("order.score") }}
                    <!-- {{
                      $t("order.monetaryUnit") +
                        dataForm.actualTotal +
                        " + " +
                        dataForm.score +
                        $t("order.score") }} -->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="order-log">
            <div class="log-title">
              {{ $t("order.logs") }}
            </div>
            <div
              v-if="dataForm.createTime"
              class="log-cont"
            >
              {{ dataForm.createTime }} {{ dataForm.nickName }}
              {{ $t("order.createOrder") }}
            </div>
            <div
              v-if="dataForm.payTime"
              class="log-cont"
            >
              {{ dataForm.payTime }} {{ dataForm.nickName }}
              {{ $t("order.payment") }}
            </div>
            <div
              v-if="dataForm.dvyTime"
              class="log-cont"
            >
              {{ dataForm.dvyTime }}
              {{ $t("order.deliverys") }}
            </div>
            <div
              v-if="dataForm.finallyTime"
              class="log-cont"
            >
              {{ dataForm.finallyTime }} {{ dataForm.nickName }}
              {{ $t("order.completed") }}
            </div>
            <div
              v-if="dataForm.cancelTime"
              class="log-cont"
            >
              {{ dataForm.cancelTime }} {{ dataForm.nickName }}
              {{ $t("order.cancelOrder") }}
            </div>
            <div
              v-if="dataForm.updateTime"
              class="log-cont"
            >
              {{ dataForm.updateTime }} {{ dataForm.nickName }}
              {{ $t("order.orderUpdate") }}
            </div>
          </div>
          <!-- ___ -->
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup>

const visible = ref(false)
const dataForm = ref({
  orderId: 0,
  orderNumber: '',
  remarks: '',
  shopRemarks: '',
  total: 0,
  deliveryExpresses: [],
  actualTotal: 0,
  dvyType: '',
  status: 1,
  addrOrderId: 0,
  nickName: '',
  orderItems: [],
  orderTime: '',
  updateTime: '',
  payTime: '',
  dvyTime: '',
  finallyTime: '',
  cancelTime: '',
  orderType: '',
  userAddrOrder: {}
})
const deliveryExpresse = ref({
  deliveryDto: {}
})

const indexs = ref(0)
const stepsStatus = computed(() => {
  if (dataForm.value.finallyTime) {
    return 4
  }
  if (dataForm.value.dvyTime) {
    return 3
  }
  if (dataForm.value.payTime) {
    return 2
  }
  if (dataForm.value.createTime) {
    return 1
  }
})

onMounted(() => {
  dataForm.value.orderNumber = useRoute().query.orderNumber || 0
  init()
})

const dataFormRef = ref(null)
const init = () => {
  visible.value = true
  nextTick(() => {
    dataFormRef.value?.resetFields()
  })
  if (dataForm.value.orderNumber) {
    // 修改
    http({
      url: http.adornUrl(`/platform/orderDelivery/orderInfo/${dataForm.value.orderNumber}`),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      data.deliveryExpresses.forEach(item => {
        if (item.deliveryDto) {
          item.deliveryDto.traces = item.deliveryDto.traces ? item.deliveryDto.traces.reverse() : item.deliveryDto.traces
        }
      })
      dataForm.value = data
      deliveryExpresse.value = dataForm.value.deliveryExpresses[0]
    })
  }
}
/**
 * 物流事件
 */
const onClickListDelivery = (delivery, index) => {
  http({
    url: http.adornUrl(`/platform/orderDelivery/deliveryOrder/${delivery.orderDeliveryId}`),
    method: 'get'
  }).then(({ data }) => {
    deliveryExpresse.value = data
    // console.log('onClickListDelivery-data', data)
  })
  indexs.value = index
}
// 表单提交
const onSubmit = () => {
}
</script>

<style lang="scss" scoped>
.page-score-order-info{
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .detail-dialog .el-dialog {
    min-width: 950px;
    margin-top: 10vh !important;
  }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .detail-dialog .goods-list .has-gutter th.is-leaf {
    background: #f7f8fa;
    color: #333;
    border-bottom: 1px solid #ebeef5;
    font-weight: 400;
    border-right: 0;
  }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
  .detail-dialog .goods-list .el-table td {
    border-right: 0;
  }

  .left-line {
    border-left: 1px solid #fff !important;
  }
  .new-page-title {
    justify-content: flex-start;
  }
  .mod-order-orderInfo {
    height: 100%;
    width: 100%;
    font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti,
      "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    color: #333;

    .order-number {
      display: flex;
      align-items: center;
      font-size: 14px;
    }

    .order-number .text {
      color: #999;
    }

    .order-number .number,
    .order-number .time {
      display: flex;
      align-items: center;
    }

    .order-number .time {
      margin: 0 15px;
    }

    .order-state {
      position: relative;
      margin-top: 15px;
      border: 1px solid #eee;
      display: flex;
      align-items: center;
    }

    .order-state .state-box {
      padding: 20px 15px;
      width: 40%;
      border-right: 1px solid #eee;
    }

    .order-state .state-box .state {
      font-size: 20px;
      font-weight: 700;
      line-height: 28px;
    }

    .order-state .state-box .state-des {
      margin-top: 10px;
      color: #999;
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .order-state .state-box .actions {
      margin-top: 15px;
    }

    .order-state .state-box .actions .item {
      display: flex;
      align-items: center;
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .order-state .state-box .actions .item .el-button--text {
      cursor: pointer;
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .order-state .state-box .actions .item .item-btn {
      padding: 3px 10px;
      border: 1px solid #eee;
      border-radius: 2px;
    }

    .order-state .state-steps {
      flex: 1;
      margin-left: -80px;
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .order-state .state-steps .el-form-item {
      margin-bottom: 0;
    }

    .packages {
      margin-top: 15px;
    }

    .packages .p-tab {
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
    }

    .packages .p-tab .item {
      // background: #f2f2f2;
      // border: 1px solid #eee;
      // margin-right: -1px;
      // margin-bottom: -1px;
      // position: relative;
      // padding: 8px 20px;
      // cursor: pointer;
      background: #F7F8FA;
      margin-right: -1px;
      margin-bottom: -1px;
      position: relative;
      text-align: center;
      line-height: 44px;
      width: 90px;
      cursor: pointer;
      font-size: 12px;
      font-weight: bold;
      height: 44px;
    }

    .packages .p-tab .item:first-child {
      border-radius: 3px 0 0 0;
    }

    .packages .p-tab .item:last-child {
      border-radius: 0 3px 0 0;
    }

    .packages .p-tab .item.active {
      background: #fff;
      border-bottom: 1px solid #fff;
    }

    .packages .p-con {
      border: 1px solid #eee;
      border-top: 0;
      padding: 20px;
      display: flex;
    }

    .packages .p-con .deliver-msg {
      width: 40%;
    }

    .packages .p-con .deliver-msg .d-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .packages .p-con .deliver-msg .d-item .text {
      width: 80px;
    }

    .packages .p-con .deliver-msg .d-goods {
      position: relative;
      width: 334px;
    }

    .packages .p-con .deliver-msg .d-goods.over {
      padding: 0 32px;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box {
      position: absolute;
      top: 40%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%);
      left: 0;
      width: 100%;
      display: none;
    }

    .packages .p-con .deliver-msg .d-goods.over .arrow-box {
      display: block;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow {
      width: 22px;
      height: 22px;
      background: #eee;
      position: absolute;
      z-index: 2;
      border-radius: 50%;
      cursor: pointer;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow.disable {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow.prev {
      left: 0;
      transform: rotate(180deg);
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow.next {
      right: 0;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::before,
    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::after {
      position: absolute;
      top: 6px;
      display: block;
      width: 0;
      height: 0;
      content: " ";
      font-size: 0;
      border: 5px solid transparent;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::before {
      left: 10px;
      border-left: 5px solid #999;
    }

    .packages .p-con .deliver-msg .d-goods .arrow-box .arrow::after {
      left: 8px;
      border-left: 5px solid #eee;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box {
      display: flex;
      overflow: hidden;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box .item {
      margin-right: 10px;
      font-size: 12px;
      cursor: pointer;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box .item:last-child {
      margin: 0;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box .item .img {
      width: 60px;
      height: 60px;
      font-size: 0;
      margin-bottom: 3px;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box .item .img img {
      width: 100%;
      height: 100%;
    }

    .packages .p-con .deliver-msg .d-goods .goods-box .item .name,
    .packages .p-con .deliver-msg .d-goods .goods-box .item .number {
      width: 60px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #999;
    }

    .packages .p-con .logistics {
      flex: 1;
    }

    .packages .p-con .logistics .l-tit {
      display: flex;
    }

    .packages .p-con .logistics .l-tit .l-state {
      color: #c00;
    }

    .packages .p-con .logistics .logistics-box {
      height: 175px;
      overflow-y: scroll;
      position: relative;
      margin-top: 15px;
    }

    .packages .p-con .logistics .logistics-box::before {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 10px;
      height: 10px;
      content: " ";
      font-size: 0;
      background: #fff;
      z-index: 1;
    }

    .packages .p-con .logistics .logistics-box::after {
      position: absolute;
      left: 6px;
      top: 0;
      display: block;
      // width: 1px;
      height: 100%;
      content: " ";
      font-size: 0;
      background: #eee;
      z-index: 0;
    }

    .packages .p-con .logistics .logistics-box .item {
      padding: 0px 0 40px 25px;
      position: relative;
      margin-left: 6px;
      border-left: 1px solid #eee;
    }

    .packages .p-con .logistics .logistics-box .item::before {
      position: absolute;
      left: -10px;
      top: 0px;
      display: block;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      content: " ";
      font-size: 0;
      background: #ccc;
      border: 5px solid #fff;
      z-index: 2;
    }

    .packages .p-con .logistics .logistics-box .item:first-child:before {
      background: #c00;
    }

    .packages .p-con .logistics .logistics-box .item .time {
      color: #999;
    }

    .packages .p-con .logistics .logistics-box .item .text {
      margin-top: 5px;
      width: 400px;
    }

    .order-info {
      background: #f7f8fa;
      margin-top: 20px;
      display: flex;
      padding: 20px;
    }

    .order-info .info-item {
      width: 25%;
      padding-right: 30px;
    }

    .order-info .info-item .item-tit {
      font-weight: 600;
    }

    .order-info .info-item .item {
      margin-top: 10px;
      display: flex;
      line-height: 20px;
    }

    .order-info .info-item .item .text {
      width: auto;
      max-width: 130px;
      white-space: nowrap;
    }
    .order-info .info-item .item .res {
      word-break: break-word;
    }

    .goods-list {
      margin-top: 20px;
    }

    .goods-list .df {
      display: flex;
      align-items: center;
    }

    .goods-list .df .name {
      margin-left: 10px;
      line-height: 20px;
    }

    .goods-list .goods-total {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }

    .goods-list .goods-total .item {
      display: flex;
      align-items: center;
      color: #999;
      margin-top: 5px;
    }

    .goods-list .goods-total .item .text {
      width: 180px;
      text-align: right;
    }

    .goods-list .goods-total .item .number {
      width: 120px;
      text-align: right;
    }

    .goods-list .goods-total .item.act-price {
      margin-top: 20px;
      color: #333;
      font-weight: 600;
    }

    .goods-list .goods-total .item.act-price .number {
      color: #c00;
      width: 120px;
    }

    .order-log {
      margin-top: 20px;
      border-top: 1px dashed #e9eaec;
      padding: 20px 10px;
    }

    .order-log .log-title {
      height: 30px;
      width: 100%;
      line-height: 30px;
      font-weight: bold;
    }

    .order-log .log-cont {
      color: #02a1e9;
      margin-top: 20px;
    }
  }
}
</style>
